// ProcessFlow.vue (流程图组件)
<template>
  <div class="process-flow-container">
    <div class="process-flow" ref="processFlow">
      <div
        class="process-node-container"
        v-for="(node, index) in sortedProcessData"
        :key="node.nodeOrder || index"
      >
        <el-card
          class="process-node"
          :class="{
            future: !node.canClick || !node.finish,
            clickable: node.canClick,
          }"
        >
          <div class="node-content" @click="handleClick(node, index)">
            <div class="node-icon-wrapper">
              <div v-if="node.finish" class="node-icon reached-icon">
                <span>{{ index + 1 }}</span>
              </div>
              <div
                v-else-if="!node.finish && node.canClick"
                class="node-icon cancel-icon"
              >
                <span>{{ index + 1 }}</span>
              </div>
              <div v-else class="node-icon future-icon">
                <span>{{ index + 1 }}</span>
              </div>
            </div>

            <p
              class="node-name"
              v-html="node.nodeNameHtml || node.nodeName"
            ></p>

            <div
              class="node-status-desc"
              :class="{
                'node-status-reached': node.finish,
                'node-status-blue': !node.finish && node.canClick,
                'node-status-gray': !node.finish && !node.canClick,
                clickStyle: node.canClick,
              }"
            >
              <span
                v-if="
                  node.nodeName === '完成岗前培训视频' &&
                  node.nodeStatus === 0 &&
                  node.canClick
                "
                style="display: flex; align-items: center"
              >
                去完成
              </span>
              <span
                v-else-if="
                  node.nodeName === '确定按时报到' && node.nodeStatus === 5
                "
                style="color: red"
              >
                {{ node.nodeStatusDesc }}
              </span>
              <span v-else class="status-text">{{ node.nodeStatusDesc }}</span>
              <i
                class="el-icon-arrow-right"
                v-if="node.canClick"
                style="font-weight: bold"
              ></i>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProcessFlow",
  props: {
    processData: {
      type: Array,
      required: true,
      default: () => [],
    },
    showCheckmarkIcon: {
      type: Boolean,
      default: true,
    },
  },
  computed: {
    sortedProcessData() {
      return [...this.processData].sort((a, b) => a.nodeOrder - b.nodeOrder);
    },
  },
  methods: {
    handleClick(node, index) {
      console.log(node);
      if (node.canClick) {
        console.log("Clicked reachable node:", node.nodeName, node);
        this.$emit("node-click", node);
      } else {
        this.$emit("node-click", node);

        console.log("Clicked future node (no action):", node.nodeName);
      }
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
$colNum: 6;
$colEven: $colNum * 2;
$lineWidth: 60px;
$rowDistance: 50px;
$colDistance: $lineWidth;
$arrowSize: 6px;
$stepColor: #9b9898;
$activeStepColor: #08a75a;

.process-flow-container {
  width: 100%;
  overflow-x: auto;
  padding: 30px 10px;
  box-sizing: border-box;
}

.process-flow {
  display: grid;
  grid-template-columns: repeat($colNum, auto);
  gap: $rowDistance $colDistance;
  justify-content: start;
  padding-bottom: 10px;
  min-width: fit-content;
}

.process-node-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  &::before {
    position: absolute;
    content: "";
    left: calc(100% + #{$colDistance / 2});
    top: 50%;
    transform: translate(-50%, -50%);
    width: $lineWidth;
    height: 0;
    border-top: 1px dashed $stepColor;
    z-index: 0;
  }

  &.connector-active::before {
    border-top-color: $activeStepColor;
  }

  &.connector-active::after {
    border-left-color: $activeStepColor;
  }

  &:nth-child(#{$colNum}n) {
    &:not(:last-child) {
      .process-node::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 100%;
        bottom: -($rowDistance / 2);
        height: $rowDistance;
        border-left: 2px dashed $stepColor;
        transform: translateX(-50%);
        z-index: 0;
      }

      .process-node::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -($rowDistance / 2);
        transform: translate(-50%, 50%);
        border-top: $arrowSize solid $stepColor;
        border-left: ($arrowSize / 1.4) solid transparent;
        border-right: ($arrowSize / 1.4) solid transparent;
        z-index: 1;
      }

      &.connector-active .process-node::before {
        border-left-color: $activeStepColor;
      }

      &.connector-active .process-node::after {
        border-top-color: $activeStepColor;
      }
    }
  }

  @for $value from 1 through $colEven {
    &:nth-child(#{$colEven}n + #{$value}) {
      $isEvenLine: if($value > $colNum, true, false);

      @if $isEvenLine {
        &::before {
          position: absolute;
          content: "";
          left: calc(100% + #{$colDistance / 2});
          top: 50%;
          transform: translate(-50%, -50%);
          width: $lineWidth;
          height: 0;
          border-top: 1px dashed $stepColor;
          z-index: 0;
        }

        &.connector-active::before {
          border-top-color: $activeStepColor;
        }

        &.connector-active::after {
          border-left-color: $activeStepColor;
        }
      }

      @if not $isEvenLine and ($value ==$colNum) {
        &::before,
        &::after {
          display: none;
        }
      }
    }
  }

  &:last-child {
    &::before,
    &::after {
      display: none !important;
    }
  }
}

::v-deep .el-card__body {
  padding: 8px;
}

.process-node {
  position: relative;
  width: 105px;
  height: 83px;
  border-radius: 4px 4px 4px 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
  background-color: #f2f3f5;
  color: #606060;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.process-node.clickable {
  cursor: pointer;
}

.process-node.clickable:hover {
  border-color: #08a75a;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.process-node.future {
  border-color: #dcdfe6;
  background-color: #ffffff;
  color: #909399;
  cursor: default;
}

.process-node.future:hover {
  border-color: #dcdfe6;
  box-shadow: none;
}

.node-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.node-icon-wrapper {
  margin-bottom: 6px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-icon {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.reached-icon {
  background-color: #08a75a;
}

.reached-icon img {
  width: 14px;
  height: 10px;
  display: block;
}

.reached-icon span {
  color: #fff;
}

.future-icon {
  background-color: #e5e7eb;
}

.cancel-icon {
  background-color: #3d3d3d;
}

.cancel-icon span {
  color: #ffffff;
}

.future-icon span {
  color: #3d3d3d;
}

.node-name {
  font-size: 12px;
  font-weight: 600;
  height: 30px;
  margin: 0 0 4px 0;
  line-height: 1.3;
  color: #303133;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.process-node.future .node-name {
  color: #909399;
}

.node-status-desc {
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 700;
  font-size: 10px;
  color: #606266;
  margin: 0;
  line-height: 10px;

  text-align: left;
  font-style: normal;
  text-transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-status-reached {
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 700;
  font-size: 10px;
  color: #08a75a;
  line-height: 10px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.node-status-blue {
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 700;
  font-size: 10px;
  color: #138eff;
  line-height: 10px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.node-status-gray {
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 700;
  font-size: 10px;
  color: #606060;
  font-weight: 700;
  font-size: 10px;
  color: #606266;
  margin: 0;
  line-height: 10px;

  text-align: left;
  font-style: normal;
  text-transform: none;
}

.node-status-reached {
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 700;
  font-size: 10px;
  color: #08a75a;
  line-height: 10px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.node-status-gray {
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 700;
  font-size: 10px;
  color: #606060;
  line-height: 10px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.process-node.future .node-status-desc {
  color: #aab0b8;
}

:deep(.el-card__body) {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.clickStyle {
  text-decoration: underline;
  cursor: pointer;
}
.process-node.future .node-status-desc {
  color: #aab0b8; // Keep existing future state styling
}

// Remove old connector style
// .connector.horizontal { ... }

:deep(.el-card__body) {
  // Check if this selector is still needed/correct
  padding: 8px !important;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

::v-deep .el-card__body {
  padding: 8px !important;
  /* 确保优先级最高 */
}

.node-status-desc {
  min-height: 10px;
  /* 根据你的设计调整 */
}

.node-status-gray {
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 700;
  font-size: 10px;
  color: #606060;
  line-height: 10px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.node-status-blue {
  font-family: Source Han Sans, Source Han Sans;
  font-weight: 700;
  font-size: 10px;
  color: #138eff !important;
  line-height: 10px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>
